<template>
  <div ref="myWrapper" class="wrapper">
    <header
      ref="myHeader"
      @mouseup="notDrag"
      @mouseout="notDrag"
      @mousedown="canDrag"
      @mousemove="drag"
    >
      Draggable Div
    </header>
    <div class="content">
      <div class="icon"><i class="bx bx-move"></i></div>
      <div class="title">Draggable Div {{ str }}</div>
      <p>
        This is a draggable div which is created using HTML CSS & Javascript.
        You can move this div anywhere on the document or page.
      </p>
    </div>
    <button @click="creatButton">create dynomic button</button>
    <!-- <Tree></Tree> -->
  </div>
</template>

<script setup>
import Tree from './tree.vue'
import { ref, watch } from "vue";
const myHeader = ref();
const myWrapper = ref();
let isMouseDown = ref(false);
let str = ref("累死我了");
function drag({ movementX, movementY }) {
  if (!isMouseDown.value) {
    return;
  }
  const getStyle = window.getComputedStyle(myWrapper.value);
  const left = parseInt(getStyle.left);
  const top = parseInt(getStyle.top);
  myWrapper.value.style.left = `${left + movementX}px`;
  myWrapper.value.style.top = `${top + movementY}px`;
}
function canDrag() {
  isMouseDown.value = true;
  str.value = "你要带我去哪?";
}
function notDrag() {
  isMouseDown.value = false;
  str.value = "累死我了";
}
watch(isMouseDown, (newValue) => {
  if (newValue) {
    myHeader.value.classList.add("active");
  } else {
    myHeader.value.classList.remove("active");
  }
});
function creatButton() {
  const button = document.createElement("button");
  const body = document.querySelector("body");

  button.style.background = "yellow";
  button.innerHTML = "i am a button just created";
  body.appendChild(button);
}
</script>

<style scoped lang="scss">
.wrapper {
  background: #fff;
  width: 450px;
  border-radius: 5%;
  /* 定位 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.4);

  header {
    color: #6f36ff;
    font-size: 23px;
    font-weight: 500;
    padding: 17px 30px;
    border-bottom: 1px solid #bfbfbf;

    &.active {
      cursor: move;
      user-select: none;
      
    }
  }
  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 30px 30px 40px;
    .icon {
      height: 95px;
      width: 95px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 5px solid #6f36ff;

      i {
        color: #6f36ff;
        font-size: 60px;
      }
    }
    .title {
      font-style: 29px;
      font-weight: 500;
      margin: 15px 0;
    }
    p {
      font-size: 16px;
      text-align: center;
    }
  }
}

// .wrapper header {
//   color: #6f36ff;
//   font-size: 23px;
//   font-weight: 500;
//   padding: 17px 30px;
//   border-bottom: 1px solid #bfbfbf;
// }
</style>
